<template>
    <view class="page_main">
        <HeaderBar title="订单列表" navBarBgc="#eeefe7"></HeaderBar>
        <view class="content">
            <view class="item" v-for="(item,index) in orderList" :key="index" @click="goToOrder(item)">
                <view class="info">
                    <view class="title">
                        <i class="iconfont icon-luxianguihuamokuai"></i>
                        <view class="name">定制路线{{index+1}}</view>  
                    </view>
                    <view class="text">
                        <view class="status">{{ item.status }}</view>
                        <view class="btn" @click.stop="handDelete(item)">
                            <wd-icon name="delete1" size="30rpx"></wd-icon>
                        </view>
                    </view>     
                </view>
                <view class="describe">{{ item.memo }}</view>
                <view class="time">提交时间：{{ item.createTime }}</view>   
            </view>
            <wd-status-tip v-if="!orderList.length" image="search" tip="暂无订单" />
        </view> 
    </view>
</template>

<script setup>
import HeaderBar from "@/components/HeaderBar/index.vue";
import { getCustomizedList , deleteCustomizedList} from "@/premiumRouteSubPack/api/index";
import { ref, onMounted } from "vue";
import {onLoad} from "@dcloudio/uni-app";

 const orderList =ref([
   {status:'已提交',name:'定制路线1',describe:'这是一段需求描述',time:'2025-04-23'},
   {status:'已确认',name:'定制路线2',describe:'这是一段需求描述',time:'2025-04-23'},
 ])
 const statusMap = {
    0: '待确认',
    1: '已确认',
    2: '已取消'
};
const currentDeleteItem = ref(null); // 当前要删除的订单
onMounted(() => {
    console.log('onMounted is called');
	getList();
})
const getList =()=>{
    getCustomizedList().then((res) => {
        console.log('4848', res);
        let {result} = res;
        orderList.value = result.map(item => ({
            ...item,
            status: statusMap[item.status] || '未知状态'
        }));
    }).catch((err) => {
        console.error('Error fetching data:', err);
    });
}
const goToOrder =(item)=>{
    console.log('order',item);
    uni.navigateTo({
        url: '/premiumRouteSubPack/pages/orderStatus/index' 
    });
    
}
// const handDelete =(e)=>{
//     console.log('delete',e);
//     deleteCustomizedList(e.id).then((res)=>{
//         getList()
//     })
//  }
 // 显示删除确认弹窗
const handDelete = (item) => {
    currentDeleteItem.value = item; // 设置当前要删除的订单
    uni.showModal({
        title: '确认删除',
        content: '确定要删除该订单吗？',
        showCancel: true,
        success: (res) => {
            if (res.confirm) {
                confirmDelete(); // 点击确认时调用删除方法
            }
        }
    });
};

// 确认删除订单
const confirmDelete = () => {
    if (!currentDeleteItem.value) return;
    deleteCustomizedList(currentDeleteItem.value.id).then(() => {
        uni.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 1500
        });
        getList(); // 刷新订单列表
    }).catch((err) => {
        uni.showToast({
            title: '删除失败',
            icon: 'none',
            duration: 1500
        });
        console.error('Error deleting data:', err);
    });
};
</script>

<style lang="scss" scoped>
.page_main{
    height: 100vh;
    background: #eeefe7;
    .content{
        padding: 50rpx 28rpx;
        .item{
            height: 197rpx;
            border-radius: 10rpx;
            background: #fff;
            margin-bottom: 20rpx;
            padding: 25rpx 18rpx 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .info{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .title{
                    display: flex;
                    align-items: center;
                    .icon-luxianguihuamokuai{
                        font-size: 48rpx;
                        color: #1b9c61;
                    }
                    .name{
                        margin-left: 10rpx;
                        color: #2b2b24;
                        font-weight: bold;
                        font-size: 30rpx;
                    }
                }
                .text{
                    display: flex;
                    align-items: center;
                    .status{
                        font-size: 25rpx;
                        color: #777;
                        height: 30rpx;
                        line-height: 30rpx;
                        padding-right: 20rpx;
                        border-right: 1rpx solid #777;
                    }
                    .btn{
                        padding: 0 20rpx;
                    }
                }
            }
            .describe{
                font-size: 25rpx;
                color: #777;
            }
            .time{
                font-size: 22rpx;
                color: #2b2b24;
            }
        }
    }
}
</style>